import React, { Suspense } from "react";
import { Layout, Button } from "antd";
import Header from "@/layouts/Header";
import { connect } from "dva";

import logo from "../../assets/logo.png";
import styles from "./Home.less";

import mailPng from "../../assets/home/mail.png";
import datePng from "../../assets/home/date.png";
import kefuPng from "../../assets/home/kefu.png";
import orderPng from "../../assets/home/order.png";
import bannerPng from "../../assets/home/banner.png";
import postPng from "../../assets/home/post.png";
import moment from "moment";
import UserSession from "@/UserSession";
import { getIndexInfo } from "@/services/user";

const { Content, Sider } = Layout;

class Home extends React.Component {
	state = {
		posts: [
			"【首页】 | 解决方案重磅发布，企业内部服务痛点一招解决，效果提升300%。",
			"【知识中心】 | 2022年7月版本更新说明。",
			"【账号中心】 | 举办活动的通知。",
			"【数据中心】 | 2022年7月版本数据更新说明。",
			"【账号中心】 | 举办活动的通知。",
			"【数据中心】 | 2022年7月版本数据更新说明。",
		],
		loading: false,
		info: {
			username: '',
			validity: '',
			accountCount: 0,
			kefuCount: 0
		}
	};

	componentDidMount() {
		const currentUser = UserSession.getCurrentUser();
		if (!currentUser.username) {
			this.props.history.push("/user/login");
		}
		this.getInfo()
	}

	getInfo = () => {
		this.setState({ loading: true }, async () => {
			const res = await getIndexInfo();
			this.setState({ info: res, loading: false });
		})
	}

	render() {
		const { currentUser: { username, validity, reviewStatus, overdue }, } = this.props;
		const { posts, info } = this.state;
		return (
			<Layout style={{ minHeight: "100vh" }}>
				<Header logo={logo} isHome={true} />
				<Content className={styles.content}>
					<Layout>
						<Sider width={300} style={{ background: "#f0f2f5" }}>
							<div className={styles.company}>
								<div>{info.tenantName}</div>
								<Button
									shape='round'
									style={{
										border: "1px solid #19C3F3",
										boxShadow: "0px 2px 5px 0px rgba(25,195,243,0.35)",
										color: "#19C3F3",
									}}
								>
									{reviewStatus == 0 ? '已完成认证' : '未完成认证'}
								</Button>
							</div>
							<div className={styles.info}>
								<div className={styles.item}>
									<img src={mailPng} alt='' />
									<div>
										<div>登录用户名</div>
										<div>{info.username}</div>
									</div>
								</div>
								<div className={styles.item}>
									<img src={datePng} alt='' />
									<div>
										<div>到期时间</div>
										<div>
											{info.validity ? moment(info.validity).format('YYYY-MM-DD') : ''}
											{overdue ? '(已到期)' : ''}
										</div>
									</div>
								</div>
								<div className={styles.item}>
									<img src={kefuPng} alt='' />
									<div>
										<div>租户账号个数</div>
										<div>{info.accountCount}</div>
									</div>
								</div>
								<div className={styles.item}>
									<img src={orderPng} alt='' />
									<div>
										<div>客服坐席个数</div>
										<div>{info.kefuCount}</div>
									</div>
								</div>
							</div>
						</Sider>
						<Content className={styles.rightContainer}>
							<img src={bannerPng} alt='' className={styles.banner} />
							<div className={styles.post}>
								<div className={styles.postTitle}>
									<span>
										<img src={postPng} alt='' />
									</span>
									<span>更新公告</span>
								</div>
								<div className={styles.postContent}>
									<ul>
										{posts.map((item, index) => {
											return (
												<li key={index}>
													<a href=''>{item}</a>
												</li>
											);
										})}
									</ul>
								</div>
							</div>
						</Content>
					</Layout>
				</Content>
			</Layout>
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(Home);
